import React, { useState } from 'react';
import { 
  ChevronLeft, 
  Eye, 
  Image, 
  Video, 
  Tag, 
  MessageSquare, 
  FileText,
  Send,
  MapPin,
  Calendar,
  Users,
  Trash2,
  LayoutGrid,
  Download
} from 'lucide-react';
import Masonry from 'react-masonry-css';
import { useNavigate } from 'react-router-dom';

interface MediaItem {
  id: number;
  type: 'image' | 'video';
  url: string;
  thumbnail?: string;
  tags: string[];
}

interface Comment {
  id: number;
  user: string;
  avatar: string;
  content: string;
  time: string;
  isOwn?: boolean;
}

interface Document {
  id: number;
  name: string;
  type: string;
  size: string;
  url: string;
}

const eventInfo = {
  title: '益阳战区2024春雷行动',
  subtitle: '凝心聚力 再创佳绩',
  description: '本次春雷行动旨在提升团队凝聚力和战斗力，通过一系列专业培训和团建活动，让团队成员在紧张的工作之余，收获成长与快乐。',
  startDate: '2024.09.05',
  endDate: '2024.09.12',
  location: '浙江 金华',
  participants: 156,
  organizer: '张经理',
  views: 36544
};

const mediaItems: MediaItem[] = [
  {
    id: 1,
    type: 'image',
    url: 'https://images.unsplash.com/photo-1517457373958-b7bdd4587205',
    tags: ['激情时刻', '团队精神']
  },
  {
    id: 2,
    type: 'video',
    url: 'https://example.com/video1.mp4',
    thumbnail: 'https://images.unsplash.com/photo-1529156069898-49953e39b3ac',
    tags: ['泪点时分']
  },
  {
    id: 3,
    type: 'image',
    url: 'https://images.unsplash.com/photo-1511578314322-379afb476865',
    tags: ['欢乐瞬间', '团队精神']
  },
  {
    id: 4,
    type: 'image',
    url: 'https://images.unsplash.com/photo-1522071820081-009f0129c71c',
    tags: ['激情时刻']
  },
  {
    id: 5,
    type: 'image',
    url: 'https://images.unsplash.com/photo-1531482615713-2afd69097998',
    tags: ['团队精神', '欢乐瞬间']
  },
  {
    id: 6,
    type: 'video',
    url: 'https://example.com/video2.mp4',
    thumbnail: 'https://images.unsplash.com/photo-1517245386807-bb43f82c33c4',
    tags: ['激情时刻', '泪点时分']
  },
  {
    id: 7,
    type: 'image',
    url: 'https://images.unsplash.com/photo-1517048676732-d65bc937f952',
    tags: ['团队精神']
  },
  {
    id: 8,
    type: 'image',
    url: 'https://images.unsplash.com/photo-1522202176988-66273c2fd55f',
    tags: ['欢乐瞬间', '激情时刻']
  }
];

const comments: Comment[] = [
  {
    id: 1,
    user: '张经理',
    avatar: 'https://images.unsplash.com/photo-1472099645785-5658abf4ff4e',
    content: '这次春雷行动真是令人难忘，团队的凝聚力得到了极大提升！',
    time: '2024-05-06 15:30',
    isOwn: true
  },
  {
    id: 2,
    user: '李总监',
    avatar: 'https://images.unsplash.com/photo-1494790108377-be9c29b29330',
    content: '通过这次活动，我深刻体会到了团队协作的重要性。',
    time: '2024-05-06 16:15'
  }
];

const documents: Document[] = [
  {
    id: 1,
    name: '2024春雷行动培训手册.pdf',
    type: 'pdf',
    size: '2.5MB',
    url: '/docs/manual.pdf'
  },
  {
    id: 2,
    name: '团队建设方案.docx',
    type: 'word',
    size: '1.8MB',
    url: '/docs/plan.docx'
  }
];

const tags = ['全部', '激情时刻', '泪点时分', '团队精神', '欢乐瞬间'];

const tabs = [
  { id: 'all', icon: <Image className="w-5 h-5" />, label: '全部' },
  { id: 'tags', icon: <Tag className="w-5 h-5" />, label: '标签' },
  { id: 'comments', icon: <MessageSquare className="w-5 h-5" />, label: '评论' },
  { id: 'docs', icon: <FileText className="w-5 h-5" />, label: '资料' }
];

const mediaTypes = [
  { id: 'all', label: '全部' },
  { id: 'images', label: '图片' },
  { id: 'videos', label: '视频' },
  { id: 'layout', label: '布局', options: [
    { value: 1, label: '单列' },
    { value: 2, label: '双列' }
  ]}
];

export default function DetailPage() {
  const navigate = useNavigate();
  const [activeTab, setActiveTab] = useState('all');
  const [selectedMediaType, setSelectedMediaType] = useState('all');
  const [selectedTag, setSelectedTag] = useState('全部');
  const [layoutColumns, setLayoutColumns] = useState(2);
  const [commentText, setCommentText] = useState('');

  const getLayoutClass = () => {
    return layoutColumns === 1 
      ? { default: 1 }
      : { default: 2, 700: 1 };
  };

  const filteredMedia = mediaItems.filter(item => {
    if (selectedMediaType === 'images') return item.type === 'image';
    if (selectedMediaType === 'videos') return item.type === 'video';
    if (selectedTag !== '全部') return item.tags.includes(selectedTag);
    return true;
  });

  const handleSubmitComment = (e: React.FormEvent) => {
    e.preventDefault();
    if (!commentText.trim()) return;
    setCommentText('');
  };

  const handleDeleteComment = (commentId: number) => {
    console.log('删除评论:', commentId);
  };

  return (
    <div className="min-h-screen bg-gray-50">
      {/* 头部信息 */}
      <div className="bg-gradient-to-b from-blue-600 to-blue-500">
        <div className="px-4 py-3 flex items-center justify-between">
          <div className="flex items-center">
            <button onClick={() => navigate(-1)} className="mr-4">
              <ChevronLeft className="w-6 h-6 text-white" />
            </button>
            <h1 className="text-lg font-semibold text-white">{eventInfo.title}</h1>
          </div>
          <div className="flex items-center space-x-1 text-white/80">
            <Eye className="w-4 h-4" />
            <span className="text-sm">{eventInfo.views.toLocaleString()}</span>
          </div>
        </div>

        <div className="px-4 pb-6">
          <h2 className="text-2xl font-bold text-white mb-2">{eventInfo.subtitle}</h2>
          <p className="text-blue-50 text-sm leading-relaxed mb-4">{eventInfo.description}</p>
          <div className="flex flex-wrap gap-3">
            <div className="flex items-center bg-white/10 text-white rounded-full px-3 py-1.5 text-sm">
              <Calendar className="w-4 h-4 mr-1.5" />
              {eventInfo.startDate} - {eventInfo.endDate}
            </div>
            <div className="flex items-center bg-white/10 text-white rounded-full px-3 py-1.5 text-sm">
              <MapPin className="w-4 h-4 mr-1.5" />
              {eventInfo.location}
            </div>
            <div className="flex items-center bg-white/10 text-white rounded-full px-3 py-1.5 text-sm">
              <Users className="w-4 h-4 mr-1.5" />
              {eventInfo.participants} 人参与
            </div>
          </div>
        </div>
      </div>

      {/* 选项卡 */}
      <div className="bg-white border-b sticky top-0 z-10">
        <div className="flex justify-between items-center px-4">
          <div className="flex overflow-x-auto no-scrollbar">
            {tabs.map(tab => (
              <button
                key={tab.id}
                onClick={() => setActiveTab(tab.id)}
                className={`flex items-center space-x-1 px-4 py-3 border-b-2 ${
                  activeTab === tab.id
                    ? 'border-blue-500 text-blue-500'
                    : 'border-transparent text-gray-600'
                }`}
              >
                {tab.icon}
                <span>{tab.label}</span>
              </button>
            ))}
          </div>
        </div>
      </div>

      {/* 内容区域 */}
      <div className="p-4 pb-20">
        {/* 媒体类型和布局切换 */}
        {(activeTab === 'all' || activeTab === 'tags') && (
          <div className="space-y-4">
            <div className="flex items-center justify-between">
              <div className="flex overflow-x-auto space-x-2 no-scrollbar">
                {mediaTypes.map(type => 
                  type.id === 'layout' ? (
                    <div key={type.id} className="flex space-x-2">
                      {type.options.map(option => (
                        <button
                          key={option.value}
                          onClick={() => setLayoutColumns(option.value)}
                          className={`flex items-center px-3 py-1.5 rounded-full whitespace-nowrap ${
                            layoutColumns === option.value
                              ? 'bg-blue-500 text-white'
                              : 'bg-gray-100 text-gray-600'
                          }`}
                        >
                          <LayoutGrid className="w-4 h-4 mr-1.5" />
                          {option.label}
                        </button>
                      ))}
                    </div>
                  ) : (
                    <button
                      key={type.id}
                      onClick={() => setSelectedMediaType(type.id)}
                      className={`px-3 py-1.5 rounded-full whitespace-nowrap ${
                        selectedMediaType === type.id
                          ? 'bg-blue-500 text-white'
                          : 'bg-gray-100 text-gray-600'
                      }`}
                    >
                      {type.label}
                    </button>
                  )
                )}
              </div>
            </div>
          </div>
        )}

        {/* 标签筛选 */}
        {activeTab === 'tags' && (
          <div className="flex overflow-x-auto py-2 space-x-2 no-scrollbar mb-4">
            {tags.map(tag => (
              <button
                key={tag}
                onClick={() => setSelectedTag(tag)}
                className={`px-3 py-1.5 rounded-full whitespace-nowrap ${
                  selectedTag === tag
                    ? 'bg-blue-500 text-white'
                    : 'bg-gray-100 text-gray-600'
                }`}
              >
                {tag}
              </button>
            ))}
          </div>
        )}

        {/* 媒体内容 */}
        {(activeTab === 'all' || activeTab === 'tags') && (
          <Masonry
            breakpointCols={getLayoutClass()}
            className="flex -ml-4 w-auto"
            columnClassName="pl-4 bg-clip-padding"
          >
            {filteredMedia.map(item => (
              <div key={item.id} className="mb-4">
                <div className="relative rounded-xl overflow-hidden bg-white shadow-sm group">
                  <img
                    src={item.type === 'video' ? item.thumbnail : item.url}
                    alt=""
                    className="w-full h-auto"
                  />
                  {item.type === 'video' && (
                    <div className="absolute inset-0 flex items-center justify-center">
                      <div className="w-12 h-12 rounded-full bg-black/50 flex items-center justify-center">
                        <Video className="w-6 h-6 text-white" />
                      </div>
                    </div>
                  )}
                  <div className="absolute bottom-2 left-2 flex flex-wrap gap-1">
                    {item.tags.map(tag => (
                      <span
                        key={tag}
                        className="bg-black/50 backdrop-blur-sm text-white text-xs px-2 py-1 rounded-full"
                      >
                        {tag}
                      </span>
                    ))}
                  </div>
                </div>
              </div>
            ))}
          </Masonry>
        )}

        {/* 评论区 */}
        {activeTab === 'comments' && (
          <div className="space-y-4 pb-16">
            {comments.map(comment => (
              <div key={comment.id} className="bg-white p-4 rounded-xl shadow-sm">
                <div className="flex items-start justify-between">
                  <div className="flex items-center space-x-3">
                    <img
                      src={comment.avatar}
                      alt={comment.user}
                      className="w-10 h-10 rounded-full"
                    />
                    <div>
                      <div className="font-medium text-gray-900">{comment.user}</div>
                      <div className="text-sm text-gray-500">{comment.time}</div>
                    </div>
                  </div>
                  {comment.isOwn && (
                    <button
                      onClick={() => handleDeleteComment(comment.id)}
                      className="text-gray-400 hover:text-red-500"
                    >
                      <Trash2 className="w-5 h-5" />
                    </button>
                  )}
                </div>
                <p className="mt-2 text-gray-700">{comment.content}</p>
              </div>
            ))}
          </div>
        )}

        {/* 文档列表 */}
        {activeTab === 'docs' && (
          <div className="space-y-4">
            {documents.map(doc => (
              <div key={doc.id} className="bg-white p-4 rounded-xl shadow-sm flex items-center justify-between">
                <div className="flex items-center space-x-3">
                  <FileText className="w-8 h-8 text-blue-500" />
                  <div>
                    <div className="font-medium text-gray-900">{doc.name}</div>
                    <div className="text-sm text-gray-500">{doc.size}</div>
                  </div>
                </div>
                <button className="text-blue-500 hover:text-blue-600">
                  <Download className="w-5 h-5" />
                </button>
              </div>
            ))}
          </div>
        )}
      </div>

      {/* 评论输入框 */}
      {activeTab === 'comments' && (
        <div className="fixed bottom-0 left-0 right-0 bg-white border-t p-3">
          <form onSubmit={handleSubmitComment} className="flex items-center space-x-2">
            <input
              type="text"
              value={commentText}
              onChange={(e) => setCommentText(e.target.value)}
              placeholder="写下你的评论..."
              className="flex-1 px-4 py-2 border rounded-full focus:outline-none focus:ring-2 focus:ring-blue-500"
            />
            <button
              type="submit"
              className="p-2 bg-blue-500 text-white rounded-full hover:bg-blue-600"
            >
              <Send className="w-5 h-5" />
            </button>
          </form>
        </div>
      )}
    </div>
  );
}